<link href="resources/plugins/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<div class="row clearfix">
	<div class="col-md-8 column">
		<br/>
		<table width="100%">
			<tr>
				<td align="left">
					<button type="button" class="btn btn-info" data-toggle="modal" 
						data-target="#modal-createtask" data-backdrop="static">Create Task</button>
				</td>
				<td align="right">
					<tm-pagination conf="paginationConf"></tm-pagination>
				</td>
			</tr>
		</table>
		<div id="warningMsgForTask"></div>
		<table id="cattable" class="table table-hover table-striped dataTable" role="grid">
			<thead>
				<tr role="row">
					<th style="white-space:nowrap;">No.</th>
					<th style="white-space:nowrap;">Task Name</th>
					<th style="white-space:nowrap;">Task Description</th>
					<th style="white-space:nowrap;">Status</th>
					<th style="white-space:nowrap;">Frequency</th>
					<th style="white-space:nowrap;">Next Execute Time</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat='task in tasks' ng-click="selectCurrentTask($index)">
					<td>{{$index+1}}</td>
					<td>{{task.abbr}}</td>
					<td>{{task.description}}</td>
					<td>{{task.runStatusLabel}}</td>
					<td>{{task.frequencyLabel}}</td>
					<td>{{task.nextSDateTimeStr}}</td>
					<td><span class="glyphicon glyphicon-ok" ng-show="selectedIndex==$index"></span></td>
				</tr>
			</tbody>
		</table>
		<table width="100%">
			<tr>
				<td align="left">
					<button type="button" class="btn btn-info" data-toggle="modal" 
						data-target="#modal-createtask" data-backdrop="static">Create Task</button>
				</td>
				<td align="right">
					<tm-pagination conf="paginationConf"></tm-pagination>
				</td>
			</tr>
		</table>
	</div>
	<div class="col-md-4 column" ng-show="selectedTask">
		<div class="page-header">
			<h1>
				<small>{{selectedTask.abbr}}</small>
			</h1>
		</div>
		<form role="form">
		<div align="right">
			<button type="button" class="btn btn-primary btn-default" ng-show="showTaskEdit" ng-click="edit()">Edit</button>
			<button type="button" class="btn btn-primary btn-default" ng-show="!showTaskEdit" ng-click="update()">Update</button>
			<button type="button" class="btn btn-primary btn-default" ng-show="!showTaskEdit" ng-click="cancel()">Cancel</button>
			<button type="button" class="btn btn-primary btn-default" ng-click="delete()">Delete</button>
		</div>
		<blockquote>
			<p>
				Description
			</p> <small>{{selectedTask.description}}</small>
		</blockquote>
		<div class="taskdetail">
			<blockquote>
				<p>
					Frequency
				</p> 
				<small>
					<label class="radio-inline"><input type="radio" name="frequency" ng-disabled="showTaskEdit"
						value="1" ng-model="selectedTask.frequency" ng-change="frenquencyChanged()" checked />Once</label>
					<label class="radio-inline"><input type="radio" name="frequency" ng-disabled="showTaskEdit"
						value="2" ng-model="selectedTask.frequency" ng-change="frenquencyChanged()"/>Daily</label>
					<label class="radio-inline"><input type="radio" name="frequency" ng-disabled="showTaskEdit"
						value="3" ng-model="selectedTask.frequency" ng-change="frenquencyChanged()"/>Weekly</label>
					<label class="radio-inline"><input type="radio" name="frequency" ng-disabled="showTaskEdit"
						value="4" ng-model="selectedTask.frequency" ng-change="frenquencyChanged()"/>Custom</label>
				</small>
			</blockquote>
			<blockquote>
				<p>
					<span ng-show="selectedTask.frequency!=4">Planned Time</span>
					<span ng-show="selectedTask.frequency==4">Cron Expression</span>
				</p> 
				<small>
					<div class="datetimeComp">
						<div class="input-group date form_datetime col-md-8" data-date="1979-09-16 25:07" 
							data-date-format="yyyy-MM-dd hh:ii" ng-show="selectedTask.frequency==1">
                    		<input class="form-control" size="16" type="text" value="" readonly 
                    			ng-model="selectedTask.nextSDateTimeTextInput" ng-disabled="showTaskEdit">
							<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
               		 	</div>
               		 	<div class="input-group date form_time col-md-8" data-date="" data-date-format="hh:ii" 
							ng-show="selectedTask.frequency==2||selectedTask.frequency==3">
                    		<input class="form-control" size="16" type="text" value="" readonly 
                    			ng-model="selectedTask.nextSDateTimeTextInput" ng-disabled="showTaskEdit">
							<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
               		 	</div>
						<div class="input-group col-md-8" ng-show="selectedTask.frequency==4" >
							<div id="warningMsgForTaskDetail"></div>
                    		<input class="form-control" type="text" id="cronExpression" placeholder="0 0 17 * * ?" maxlength="20" size="16"
								ng-model="selectedTask.cronExpression" ng-disabled="showTaskEdit"/>
               		 	</div>
					</div>
				</small>
			</blockquote>
			<blockquote>
				<p>
					Mark as active
				</p> 
				<small>
					<label class="radio-inline"><input type="radio" name="status" value="1" 
						ng-model="selectedTask.status" ng-disabled="showTaskEdit"/>Yes</label>
					<label class="radio-inline"><input type="radio" name="status" value="2" 
						ng-model="selectedTask.status" ng-disabled="showTaskEdit"/>No</label>
				</small>
			</blockquote>
		</div>
		</form>
	</div>
</div>

<div class="modal fade" id="modal-createtask" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-createtask-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="myModalLabel">
					Task Name
				</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<select ng-model="taskOptions.selectedName" ng-options="option.name as option.abbr for option in taskOptions | orderBy:'abbr'"
						ng-change="monitorTaskChg()" class="form-control">
					<!--select ng-model="option" ng-options="select as label for (key, value) in tasksForModal"
						ng-change="monitorTaskChg()"-->
					</select>
				</div
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
				<button type="button" class="btn btn-primary" ng-click="chooseTaskForModal()">Yes</button>
			</div>
		</div>
	</div>
</div>

<script src="resources/plugins/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
	$(".form_datetime").datetimepicker(
		{
			format: 'yyyy-mm-dd hh:ii',
			autoclose: true,
			todayBtn: true,
			todayHighlight: true,
			startDate: new Date(),
        	minuteStep: 30,
			pickerPosition: "top-left"
		}
	);
	$(".form_time").datetimepicker(
		{
			format: 'hh:ii',
        	todayBtn:  true,
			autoclose: true,
			todayHighlight: true,
			minuteStep: 30,
			pickerPosition: "top-left"
		}
	);
	
</script> 
